<script lang="ts" setup>
import AddBannerVue from "./AddBanner.vue";
import { onMounted, reactive, ref } from "vue";
import service from "@/utils/service";
import type { IBannar } from "@/mytype"
import { ElMessageBox } from "element-plus";
import {getBannerDataApi,deleteBannerByIdApi,deleteAllApi,changeFlagApi} from "@/api"


// 一、轮播图列表（业务）相关代码

// 轮播图展示的数据
let banners = reactive<Array<IBannar>>(new Array<IBannar>());

console.log("一开始的banners", banners);

// 从后端获取数据
const getBannerData = () => {
  getBannerDataApi()
    .then((res: any) => {
      if (res.code === "200") {
        banners.splice(0, banners.length, ...res.data);
        console.log("响应回来banners", banners);
      }
    })
}

onMounted(() => getBannerData())

// 二、添加轮播图（业务）的相关代码
const isShowAdd = ref(false);

const showAddBanner = () => {
  isShowAdd.value = true;
}

const hideAddBanner = () => {
  isShowAdd.value = false;
}

const okHandle = () => {
  hideAddBanner();
  getBannerData();
}

// 三、修改轮播图的访问状态（是否可用）
const changeFlag = (bannerid: string, flag: boolean) => {

  changeFlagApi({
      bannerid, 
      flag
    }).then((res:any) => {
    if (res.code === "200") {
      ElMessageBox({
        title: "提示",
        message: "修改成功"
      })
    }
  })
}

// 删除

function deleteHandler(bannerid: string) {
  ElMessageBox.confirm(
    '亲，亲真的要删除吗',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteBannerByIdApi(bannerid).then((res: any) => {
        if(res.code==="200"){
          getBannerData();
          ElMessage({
            type: 'success',
            message: '删除成功！',
          })
        }else{
          ElMessage({
            type: 'info',
            message: '删除失败！',
          })
        }        
      }).catch(err => {
        
        ElMessage({
          type: 'info',
          message: '删除失败！',
        })

      })

    })

}

// 删除全部

function deleteAll() {

  ElMessageBox.confirm(
    '亲，亲真的要删除全部数据吗',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteAllApi()
        .then((res: any) => {
          if (res.code === "200") {
            ElMessage({
              type: 'success',
              message: '删除成功！',
            })
            getBannerData();
          }
        })
    });
}

</script>

<template>
  <div>
    <el-button @click="showAddBanner">添加轮播图</el-button>
    <el-button @click="deleteAll">删除全部数据</el-button>
    <AddBannerVue v-if="isShowAdd" @ok="okHandle" @cancel="hideAddBanner" class="addbanner-position">
    </AddBannerVue>
    <hr />
    <el-table :data="banners" style="width: 100%">
      <el-table-column prop="bannerid" label="编号" width="180" />
      <el-table-column label="图片" width="180">
        <template #default="scope">
          <img class="img" :src="scope.row.img" />
        </template>
      </el-table-column>
      <el-table-column prop="link" label="连接" />
      <el-table-column prop="alt" label="图片提示" />
      <el-table-column label="图片是否展示">
        <template #default="scope">
          <el-switch v-model="scope.row.flag" @change="() => changeFlag(scope.row.bannerid, scope.row.flag)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="删除">
        <template #default="scope">
          <el-button @click="deleteHandler(scope.row.bannerid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.img {
  width: 100px;
  max-height: 100px;
}

.addbanner-position {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
</style>
